<div class="demo-button">
  <h4 class="demo-section-header">Buttons</h4>
  <section>
    <button mat-button>normal</button>
    <button mat-raised-button>raised</button>
    <button mat-stroked-button>stroked</button>
    <button mat-flat-button>flat</button>
    <button mat-fab><mat-icon>check</mat-icon></button>
    <button mat-mini-fab><mat-icon>check</mat-icon></button>
  </section>

  <h4 class="demo-section-header">Anchors</h4>
  <section>
    <a href="//www.google.com" mat-button>SEARCH</a>
    <a href="//www.google.com" mat-raised-button>SEARCH</a>
    <a href="//www.google.com" mat-stroked-button>SEARCH</a>
    <a href="//www.google.com" mat-flat-button>SEARCH</a>
    <a href="//www.google.com" mat-fab><mat-icon>check</mat-icon></a>
    <a href="//www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
  </section>

  <h4 class="demo-section-header">Text Buttons [mat-button]</h4>
  <section>
    <button mat-button>unthemed</button>
    <button mat-button color="primary">primary</button>
    <button mat-button color="accent">accent</button>
    <button mat-button color="warn">warn</button>
    <button mat-button disabled>disabled</button>
  </section>

  <h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
  <section>
    <button mat-raised-button>unthemed</button>
    <button mat-raised-button color="primary">primary</button>
    <button mat-raised-button color="accent">accent</button>
    <button mat-raised-button color="warn">warn</button>
    <button mat-raised-button disabled>disabled</button>
  </section>

  <h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
  <section>
    <button mat-stroked-button>unthemed</button>
    <button mat-stroked-button color="primary">primary</button>
    <button mat-stroked-button color="accent">accent</button>
    <button mat-stroked-button color="warn">warn</button>
    <button mat-stroked-button disabled>disabled</button>
  </section>

  <h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
  <section>
    <button mat-flat-button>unthemed</button>
    <button mat-flat-button color="primary">primary</button>
    <button mat-flat-button color="accent">accent</button>
    <button mat-flat-button color="warn">warn</button>
    <button mat-flat-button disabled>disabled</button>
  </section>

  <h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
  <section>
    <button mat-icon-button><mat-icon>cached</mat-icon></button>
    <button mat-icon-button color="primary"><mat-icon>cached</mat-icon></button>
    <button mat-icon-button color="accent"><mat-icon>backup</mat-icon></button>
    <button mat-icon-button color="warn"><mat-icon>trending_up</mat-icon></button>
    <button mat-icon-button disabled><mat-icon>visibility</mat-icon></button>
  </section>

  <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
  <section>
    <button mat-fab><mat-icon>delete</mat-icon></button>
    <button mat-fab color="primary"><mat-icon>delete</mat-icon></button>
    <button mat-fab color="accent"><mat-icon>bookmark</mat-icon></button>
    <button mat-fab color="warn"><mat-icon>home</mat-icon></button>
    <button mat-fab disabled><mat-icon>favorite</mat-icon></button>
  </section>

  <h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
  <section>
    <button mat-mini-fab><mat-icon>menu</mat-icon></button>
    <button mat-mini-fab color="primary"><mat-icon>menu</mat-icon></button>
    <button mat-mini-fab color="accent"><mat-icon>plus_one</mat-icon></button>
    <button mat-mini-fab color="warn"><mat-icon>filter_list</mat-icon></button>
    <button mat-mini-fab disabled><mat-icon>home</mat-icon></button>
  </section>

  <h4 class="demo-section-header">Interaction/State</h4>
  <section class="demo-no-flex">
    <div>
      <p>isDisabled: {{isDisabled}}</p>
      <p>Button 1 as been clicked {{clickCounter}} times</p>
      <button mat-flat-button (click)="isDisabled=!isDisabled">
        {{isDisabled ? 'Enable All' : 'Disable All'}}
      </button>
      <button mat-flat-button (click)="button1.focus()">Focus 1</button>
      <button mat-flat-button (click)="button2.focus()">Focus 2</button>
      <button mat-flat-button (click)="button3.focus()">Focus 3</button>
      <button mat-flat-button (click)="button4.focus()">Focus 4</button>
    </div>
    <div>
      <button mat-button #button1 [disabled]="isDisabled"
              (click)="clickCounter=clickCounter+1">
        Button 1
      </button>
      <button mat-button #button2 color="primary" [disabled]="isDisabled">
        Button 2
      </button>
      <a href="//www.google.com" #button3 mat-button color="accent"
         [disabled]="isDisabled">
        Button 3
      </a>
      <button mat-raised-button #button4 color="primary"
              [disabled]="isDisabled">
        Button 4
      </button>
      <button mat-mini-fab [disabled]="isDisabled">
        <mat-icon>check</mat-icon>
      </button>
      <button mat-icon-button color="accent" [disabled]="isDisabled">
        <mat-icon>favorite</mat-icon>
      </button>
    </div>
  </section>

  <h4 class="demo-section-header">Overview</h4>
  <section>
    <button-overview-example></button-overview-example>
  </section>
</div>
